<template>
  <el-container style="padding: 20px;">
    <el-header>
      <div>
        <el-button type="text" style="margin-left: 16px" @click="this.$router.push('/ordermgr');">
          返回
        </el-button>
      </div>
      <h2>导入订单</h2>
    </el-header>

    <el-main>
      <div class="upload-container">
        <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="http://127.0.0.1:8080/order/insert"
            :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>

          <el-button class="ml-3" type="success" @click="submitUpload">
            点击上传
          </el-button>

          <template #tip>
            <div class="el-upload__tip">
              仅支持 .xlsx 文件
            </div>
          </template>
        </el-upload>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";

const uploadRef = ref();

// Excel 上传
const submitUpload = () => {
  // 上传按钮
  uploadRef.value.submit();
};
</script>

<style scoped>
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.upload-demo {
  width: 400px;
  border: 2px dashed #409EFF; /* Element UI primary color */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  background-color: #f9f9f9; /* Light background for better visibility */
}

.el-upload__tip {
  margin-top: 10px;
  color: #666; /* A softer color for the tip */
}
</style>
